Update browser cache for CSS and JS files for modified files
When working with CSS and JS I've noticed that sometimes the browser (ex: Firefox) doesn't download the latest version of the .css or .js files that I'm working on and goes straight to it's cached version.
So my solution for this is to add a querystring to the .css or .js url with the last modified datetime stamp in ticks. The outcome will look something like this:
<link rel="stylesheet" type="text/css" href="/css/test1.css?t=633543081724531250" />
<script src="/js/test1.js?t=633537082284531250" type="text/javascript"></script>
VB.net
'This file list will be used to place all .css or .js files
Dim fileList As List(Of String) = New List(Of String)
'Register CSS and JS with last modified datetime ticks stamp
fileList = New List(Of String)
fileList.Add("/css/file1.css")
fileList.Add("/css/file2.css")
fileList.Add("/js/file1.js")
fileList.Add("/js/file2.js")
For Each fileName As String In fileList
Dim dModified As String = New System.IO.FileInfo(Server.MapPath(fileName)).LastWriteTime.Ticks.ToString()
Dim fSrc As String = fileName & "?t=" & dModified
If fileName.ToLower().Contains(".css") Then
Using cssLink As New HtmlLink()
cssLink.Attributes.Add("rel", "stylesheet")
cssLink.Attributes.Add("type", "text/css")
cssLink.Href = fSrc
Page.Header.Controls.Add(cssLink)
End Using
ElseIf fileName.ToLower().Contains(".js") Then
Page.ClientScript.RegisterClientScriptInclude(Me.GetType(), fSrc, fSrc)
End If
Next
fileList.Clear()
C#
//This file list will be used to place all .css or .js files
List<string> fileList = new List<string>();
//Register CSS and JS with last modified datetime ticks stamp
fileList = new List<string>();
fileList.Add("/css/file1.css");
fileList.Add("/css/file2.css");
fileList.Add("/js/file1.js");
fileList.Add("/js/file2.js");
foreach (string fileName in fileList)
{
string dModified = new System.IO.FileInfo(Server.MapPath(fileName)).LastWriteTime.Ticks.ToString();
string fSrc = fileName + "?t=" + dModified;
if (fileName.ToLower().Contains(".css"))
{
using (HtmlLink cssLink = new HtmlLink())
{
cssLink.Attributes.Add("rel", "stylesheet");
cssLink.Attributes.Add("type", "text/css");
cssLink.Href = fSrc;
Page.Header.Controls.Add(cssLink);
}
}
else if (fileName.ToLower().Contains(".js"))
{
Page.ClientScript.RegisterClientScriptInclude(this.GetType(), fSrc, fSrc);
}
}
fileList.Clear();